import React, { useEffect, useState } from 'react'
import Navbar from '../../../compounts/navber/Navbar'
import { Dialog, List, SwipeAction, Toast, Image, Tag } from 'antd-mobile'
import request from '../../../api/request'
import style from './index.module.css'
import { useNavigate } from 'react-router-dom'

function Index() {
    const nav = useNavigate()
    // 存储医生数据
    const [doctorList, setDoctorList] = useState([])
    // console.log(doctorList);

    // 关注医生列表
    const followDoctor = () => {
        request.get('/user/verify/v1/findUserDoctorFollowList', {
            params: {
                page: 1,
                count: 10
            }
        }).then((res) => {
            console.log(res)
            setDoctorList(res.data.result)
        })
    }
    useEffect(() => {
        followDoctor()
    }, [])

    const rightActions = (id) => [
        {
            key: 'unsubscribe',
            text: '取消关注',
            color: 'light',
            onClick: () => handleUnsubscribe(id)
        },
    ]

    // 取消关注
    const handleUnsubscribe = (doctorId) => {
        request.delete('/user/inquiry/verify/v1/cancelFollow', {
            params: { doctorId: doctorId }
        }).then((res) => {
            console.log(res);
            followDoctor()
        })
    }

    // 跳转详情页
    const DoctorClick =(id)=>{
        console.log(id);
        nav(`/doctorDetail?id=${id}`)
    }
    return (
        <div className={style.box}>
            <Navbar title={'我的关注'}></Navbar>

            <div>
                <List
                    style={{ '--border-inner': 'none', '--border-bottom': 'none' }}
                >
                    {doctorList.map((item, index) => (
                        <SwipeAction
                            key={index}
                            // leftActions={leftActions}
                            rightActions={rightActions(item.doctorId)}
                            // 点击操作按钮后的回调函数
                            onAction={(action) => console.log(action)}
                        >
                            <List.Item>
                                <div className={style.listBox} onClick={() => DoctorClick(item.doctorId)}>
                                    <Image src={item.imagePic} width={100} height={100} fit='fill' />
                                    <div className={style.listRight}>
                                        <div className={style.name}>{item.name} <Tag className={style.jobTitle}>{item.jobTitle}</Tag></div>
                                        <p className={style.hospital}>{item.inauguralHospital}/{item.departmentName}</p>
                                        <div>
                                            <span className={style.goodRate}>好评率 {100 - item.praiseNum}%</span>  <span className={style.number}>服务患者数 {item.number}</span>
                                        </div>
                                    </div>
                                </div>
                            </List.Item>
                        </SwipeAction>
                    ))}
                </List>
            </div>

        </div>
    )
}

export default Index
